<template>
  <div class="input-wrapper">
    <el-form :model="commentArea" ref="commentArea" style="margin:10px 0 85px 0">
      <el-form-item prop="content" :rules="[{ required: true, message: '您的评论的是空的哟~~',trigger:'change'}]">
        <el-input class="gray-bg-input"
                  v-model="commentArea.content"
                  type="textarea"
                  :rows="3"
                  autofocus
                  maxlength="100"
                  show-word-limit
                  :placeholder="marker">
        </el-input>
      </el-form-item>
      <el-form-item style="float: right">
        <div class="btn-control">
          <el-button class="btn" type="warning" @click="handleCancel">取消评论</el-button>
          <el-button class="btn" type="primary" @click="handleSubmit('commentArea')">发表评论</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import {addComment} from '@/api/comment'

export default {
  name: "index",
  props: {
    // 回复的对象
    toInfo: {
      type: Object
    },
    currentPage:{
      type: Number
    },
    pageSize:{
      type: Number
    }

  },
  computed: {
    ...mapGetters(['userInfo']),
    marker() {
      if (this.toInfo) {
        if (this.toInfo.fromId != this.userInfo.id) {
          return '@' + this.toInfo.fromName
        }
      }
      return '都看到最下面了，那就留下点什么吧~~'
    }
  },
  data() {
    return {
      commentArea: {
        content: '',
        blogId: null,
        fromId: null,     //评论人的id
        fromName: '',     //评论人的昵称
        parentId: 0,
        toId: null,
        toName: '',
      },
      sessionUserInfo: {},
    }
  },
  methods: {
    //发送评论
    handleSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.$store.getters.userId) {
            this.$notify.error({
              title: '错误',
              message: '还未登录不能评论哦~'
            });
            return
          }
          let to = this.toInfo
          if (to) {
            this.commentArea.blogId = to.blogId
            this.commentArea.fromId = this.userInfo.id
            this.commentArea.fromName = this.userInfo.nickname
            if (to.fromId != this.userInfo.id && to.parentId != 0) {  //不是该账号 且 不是孙评论
              this.commentArea.toId = to.fromId
              this.commentArea.toName = to.fromName
            }
            this.commentArea.parentId = to.commentId
            this.submitComment(to)
          } else {
            this.commentArea.blogId = this.$route.params.bId
            this.commentArea.fromId = this.userInfo.id
            this.commentArea.fromName = this.userInfo.nickname
            this.submitComment()
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //提交
    submitComment(to) {
      addComment(this.commentArea,this.currentPage,this.pageSize).then(res => {
        if (res.status) {
          if (to) {
            this.handleCancel()
          }
          this.$message.success('评论成功')
          this.commentArea.content = ''
          this.$store.commit('SET_COMMENT_LIST', res.data)
        } else {
          this.$notify.error({
            title: '错误',
            message: '评论失败，请稍后再试~'
          });
        }
      })
    },
    //取消评论（关闭评论框）
    handleCancel() {
      if (this.toInfo) {
        document.getElementById(this.toInfo.commentId).style.display = 'none';
      }
      this.commentArea.content = ''
    },
  },
  created() {
  }
}
</script>

<style lang="scss">

</style>

